<template>
  <div>
    <el-form
      ref="form"
      label-width="80px"
      :model="diaryEditForm">
      <el-card>
        <div slot="header">
          <el-form-item
            label="日报日期"
            style="margin-bottom:0;">
            <el-row>
              <el-col :span="8">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  v-model="diaryEditForm.work_date">
                </el-date-picker>
              </el-col>
              <el-col :span="8">
                节假日:&nbsp;&nbsp;&nbsp;
                <el-switch
                  active-color="#13ce66"
                  inactive-color="#aaaaaa"
                  v-model="diaryEditForm.is_holiday">
                </el-switch>
              </el-col>
              <el-col
                :span="8"
                style="text-align:right;">
                <el-button
                  type="primary"
                  icon="plus"
                  @click="addWork()" >
                  添加工作
                </el-button>
                <el-button
                  type="danger"
                  icon="delete"
                  @click="deleteWork()">
                  删除工作
                </el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </div>
        <div v-for="(work, index) in diaryEditForm.workInfo">
          <el-card
            style="margin-bottom:20px"
            class="box-card">
            <div
              slot="header"
              class="clearfix">
              <el-row>
                <el-col :span="12">
                  <span style="line-height: 6px;">
                    工作信息{{index+1}}
                  </span>
                </el-col>
                <el-col
                  :span="12"
                  style="text-align:right;">
                  <el-button
                    type="danger"
                    icon="delete"
                    @click="deleteWork(index)" >
                    删除工作
                  </el-button>
                </el-col>
              </el-row>
            </div>
            <el-form-item label="工作类型">
              <el-select
                v-model="work.work_type"
                placeholder="请选择类型">
                <el-option
                  v-for="work_type in workTypeList"
                  :key="work_type.id"
                  :label="work_type.value"
                  :value="work_type.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工作项目">
              <el-select
                allow-create
                v-model="work.group"
                :filterable="true"
                placeholder="请选择项目">
                <el-option
                  v-for="item in groupList"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id">
                </el-option>
              </el-select>
              <el-button
                icon="plus"
                @click="openAddItemDialog(['项目', 'group'])">
                添加项目
              </el-button>
          </el-form-item>
          <el-form-item label="工作内容">
            <el-select
              v-model="work.task"
              placeholder="请选择">
              <el-option
                v-for="task in taskList"
                :key="task.id"
                :label="task.value"
                :value="task.id">
              </el-option>
            </el-select>
            <el-button
              icon="plus"
              @click="openAddItemDialog(['工作', 'task'])">
              添加工作
            </el-button>
          </el-form-item>
          <el-form-item label="时长">
            <el-input-number
              v-model="work.duration"
              :min="0"
              :max="24">
            </el-input-number>
          </el-form-item>
        </el-card>
      </div>
      <el-form-item label="工作评价">
        <el-rate
          style="margin-top:8px"
          v-model="diaryEditForm.evaluate"
          :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
          :allow-half="true">
        </el-rate>
      </el-form-item>
      <el-form-item label="详细">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 6}"
          placeholder="请输入内容"
          v-model="diaryEditForm.details">
        </el-input>
      </el-form-item>
      <el-row :gutter="20">
        <el-col :offset="20">
          <el-button
            type="primary"
            icon="check"
            @click="submitDiaryData">
            &nbsp;&nbsp;提&nbsp;交&nbsp;日&nbsp;报&nbsp;&nbsp;
            </el-button>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'diary-form',
  data () {
    return {
      workTypeList: [
        {
          value: '普通',
          id: 1
        },
        {
          value: '加班',
          id: 2
        },
        {
          value: '缺勤',
          id: 3
        }
      ]
    }
  },
  computed: mapState({
    groupList: state => state.groupList,
    taskList: state => state.taskList,
    diaryFormDate: state => state.diaryFormDate,
    diaryEditForm: state => state.diaryFormDate.diaryData
  }),
  created () {
    this.$store.dispatch('getDiaryDataList', 'group')
    this.$store.dispatch('getDiaryDataList', 'task')
  },
  methods: {
    ...mapActions([
      'getDiaryDataList',
      'postDiary'
    ]),
    submitDiaryData () {
      console.log(this.$store.state.workList[this.diaryEditForm.work_date])
      console.log(this.diaryEditForm)
      if (this.diaryFormDate.type === 'edit') {
        for (let i = 0; i < this.diaryEditForm.workInfo.length; i++) {
          if (this.diaryEditForm.workInfo[i].group === this.$store.state.workList[this.diaryEditForm.work_date][i].group) {
            this.diaryEditForm.workInfo[i].group = this.$store.state.workList[this.diaryEditForm.work_date][i].group_id
          }
          if (this.diaryEditForm.workInfo[i].task === this.$store.state.workList[this.diaryEditForm.work_date][i].task) {
            this.diaryEditForm.workInfo[i].task = this.$store.state.workList[this.diaryEditForm.work_date][i].task_id
          }
        }
      }
      if (this.postDiary(this.diaryEditForm)) {
        this.$router.push({name: 'DiaryDisplayView'})
      }
    },
    openAddItemDialog (dialogData) {
      this.$store.commit('isAddItemDialogOpen', dialogData)
    },
    addWork () {
      this.diaryEditForm.workInfo.push({
        group: '',
        task: '',
        work_type: '',
        duration: 0
      })
    },
    deleteWork (index = 0) {
      if (index === 0) {
        alert('至少一条数据')
      } else {
        if (index < this.diaryEditForm.workInfo.length - 1) {
          for (let i = index; i < this.diaryEditForm.workInfo.length; i++) {
            this.diaryEditForm.workInfo[i] = this.diaryEditForm.workInfo[i + 1]
          }
        }
        this.diaryEditForm.workInfo.pop()
      }
    }
  }
}
</script>
<style scoped>
.el-card__header {
  padding: 10px 20px 10px 20px;
}
</style>